/**
 * Created by Administrator on 2017/5/2.
 */
$(function(){
    $('cite').click(function(){
        $('.menuUl').stop().slideDown(600);

    })
    $('.menuUl').click(function(){
        $('.menuUl').css('display','none');
    })
    //logo

//关于珠海显示
    $(function(){
        $('.zhuhai').mouseover(function(){
            $('#zhuhai').css('display','block');
        })
        $('.zhuhai').mouseout(function(){
            $('#zhuhai').css('display','none');
        })
    })

    //轮播
    var header = document.getElementById('header');
    var headerUl =document.getElementById('headerUl');//这是ul
    var headerLis =headerUl.children;//这是ul下面的li
    var headerOl =document.getElementById('headerOl');//这是ol
    var headerWid = document.getElementById('header').offsetWidth;//这是盒子的宽度
    var arr =['#159959','#0E8277','#0A81DC','#47C0F7','#FF651A','#EC716F',]//背景颜色
    var timer =null;
    for(var i=0;i<headerLis.length;i++){
        headerLis[i].style.background = arr[i];
    }
    //动态创建ol li标签
    for(var i=0; i<headerLis.length;i++){
        var li =document.createElement('li');
        headerOl.appendChild(li);
    }
    //克隆第一个li
    var cloneLi = headerLis[0].cloneNode(true);
    headerUl.append(cloneLi);
    var olLis =headerOl.children;
    console.log(olLis);
    ////给每个li设置点击事件
    for(var i = 0; i<olLis.length;i++){
        olLis[i].index = i;
        olLis[i].onclick =function(){
            for(var i=0;i<olLis.length;i++){
                olLis[i].className ='';
            }
            this.className ='current';
            var target = -this.index * headerWid;
            eventutils.animate(headerUl,{'left':target});
        }
        pic=this.index;
        square=this.index;
    }
    //鼠标放在header 上 让左右箭头显示
    var all = document.getElementById('all');
    header.onmouseover =function(){
        all.style.display= 'block';
        clearInterval(timer);
    }
    header.onmouseout =function(){
        all.style.display= 'none';
        timer = setInterval(right.onclick,3000);
    }
    //点击右箭头
    var pic = 0 ;//记录当前图片索引
    var square =0 ;//记录当前按钮索引
    var right =document.getElementById('right');
    var left =document.getElementById('left');
    right.onclick =function(){
        if(pic==headerLis.length-1){
            headerUl.style.left =0;
            pic=0;
        }
        pic++;
        //通过动画函数对ul进行移动
        //target 和 图片索引 和 图片宽度 有关 而且是负数
        var target = -pic * headerWid;
        eventutils.animate(headerUl,{left:target});
        //索引也要统一
        if(square <olLis.length-1){
            square++;
        }else{
            square =0;
        }
        for(var i = 0 ;i<olLis.length; i++){
            olLis[i].className ='';
        }
        olLis[square].className ='current';
    }
    //点击左箭头
    left.onclick =function(){
        if(pic==0){
            pic= headerLis.length-1;
            headerUl.style.left = -(headerLis.length-1)* headerWid +'px';
        }
        pic--;
        //通过动画函数对ul进行移动
        //target 和 图片索引 和 图片宽度 有关 而且是负数
        var target = -pic * headerWid;
        eventutils.animate(headerUl,{left:target});
        //索引也要统一
        if(square >0){
            square--;
        }else{
            square = olLis.length-1;
        }
        for(var i = 0 ;i<olLis.length; i++){
            olLis[i].className ='';
        }
        olLis[square].className ='current';
    }
    timer = setInterval(right.onclick,2000);
    //轮播结束；
})

//导航栏事件
$(function () {
    //滚动条事件
    $(window).scroll(function () {
        //判断向上卷曲出去的距离是否大于等于 应用类样式top的div的高度
        if($(document).scrollTop()>=1){
            //获取导航栏的元素 .nav 脱离文档流
            $("nav").css("position","fixed").css("top",0).css('background','rgba(0,0,0,.5)').css('transition', '0.3s');
            $("#header").css("marginTop",0);

        }else{
            $("nav").css("position","absolute").css('background','');
            $("main").css("marginTop",0);
        }
    });
});

//轮播图内部
$(function(){
    //var pc = 0;
    //var left = $('#headerUl').position().left;
    //console.log(left);
    setTimeout(function(){
        for(var i= 0; i<6 ;i++){
            var left = -i*$('#header').width();
            if(i==1){
                if(left== -1*$('#header').width()){
                    $('#headerUl>#two>.left>img').addClass('animated slideInLeft');
                    $('#headerUl>#two>.right').addClass('animated slideInRight');

                }
            }
        }
    },2000);
    setTimeout(function(){
        getTimer(2,'#three');
    },4000);
    setTimeout(function(){
        getTimer(3,'#for');
    },6000);
    setTimeout(function(){
        getTimer(4,'#five');
    },8000);
    setTimeout(function(){
        getTimer(5,'#six');
    },10000);
    //获取id
    function getTimer(num,id){
        for(var i= 0; i<6 ;i++){
            var left = -i*$('#header').width();
            console.log(left);
            if(i==num){
                if(left== -num*$('#header').width()){
                    $('#headerUl>'+id+'>.left>img').addClass('animated slideInLeft');
                    $('#headerUl>'+id+'>.right').addClass('animated slideInRight');

                }
            }
        }
    }

})
//column 背景色
$(function(){
    var columnArr=['clm1','clm2','clm3','clm4']
    var column = document.querySelector('.column');
    var divs =column.children;
    for(var i =0 ; i<divs.length; i++){
        divs[i].style.background = 'url("images/'+columnArr[i]+'.png") repeat-x';
    }
})

//product 地图 部分
$(function(){
    $(window).scroll(function () {

        if($(document).scrollTop()>=1000) {
            $('.ditu>img').addClass('animated slideInLeft');
            $('.content2_right').addClass('animated slideInRight');
        }
    });
})